<template>
  <div class="question-zixun">
    <div class="text-box">
      <textarea
        class="textarea"
        placeholder-class="placeholderClass"
        v-model="inputContent"
        :placeholder="placeholder"
        :maxlength="maxlength"
        :show-confirm-bar="false"
      />
      <text class="input-num">{{inputLength}}/{{maxlength}}</text>
    </div>
    <div class="content-box">
      <div class="type">
        <text class="red-text">*</text>
        <text class="type-title">问题类型:</text>

        <picker class="picker" @change="handlePick" range-key="title" :range="cateList">
          <div class="picker-content">
            <text class>{{chooseData[0].title}}</text>
            <text class="iconfont icon-qianjin"></text>
          </div>
        </picker>

        <!-- <div class="picker">
          <div class="picker-content" @click="handleShow">
            <text class>{{chooseData[0].title}}-{{chooseData[1].title}}</text>
            <text class="iconfont icon-qianjin"></text>
          </div>
        </div> -->
      </div>
      <button class="submit" @click="handleSubmit">提交</button>
    </div>
    <!-- 分类组件 -->
    <!-- <gh-cate-picker :show="isShow" @getCate="getCate" @defaultData="defaultData" /> -->
  </div>
</template>
<script>
import LbPicker from "@/components/lb-picker";
export default {
  props: [
    "url", 
    "placeholder",
    "type", // 订单类型
    "serve",  // 服务类型
    "lid"
   ],
  data() {
    return {
      maxlength: 300,
      inputContent: "",
      chooseData: [],  //  选择的大类
      cateList: [],  // 初始化大类数据
    };
  },
  computed: {
    inputLength() {
      return this.inputContent.length;
    }
  },
  mounted() {
    const that = this
    uni.request({
      url: that.$store.state.baseUrl + "member.index",
      data: {
        op: "getConsultation",
        lawyer_id: that.lid
      },
      success(res) {
        console.log(res.data.data.list);
        that.cateList = res.data.data.list; // 分类数据
        that.chooseData = [that.cateList[0]]
      }
    });
  },
  methods: {
    handlePick(e) {
      const index = e.detail.value
      this.chooseData = [ this.cateList[index] ]
      console.log(this.cateList[index]);
    },
    async handleSubmit() {
      let that = this
      if (this.inputContent.trim().length < 15) {
        uni.showToast({
          mask: true,
          title: "描述的问题不能少于15个字",
          icon: "none",
          duration: 2500
        });
      } else {
        let lawyer_id = this.serve == 2 ? this.lid : ''
        let res = await this.$gh
          .request("member.order", {
            data: {
              op: "addOrder",
              service_type: this.serve,
              consultation_type: this.type,
              problem: this.inputContent,
              mid: this.chooseData[0].id,
              lawyer_id: lawyer_id
            }
          })
          .catch(err => {
            if (err.code == 41009) {
              this.$store.dispatch("login", err.message);
            }else if(err.code == 201){
              this.$store.dispatch("modal", '律师不在线或者未开启此类型咨询，无法下单！').finally(() => {
                uni.switchTab({
                   url: '/pages/index/index'
                });
              })
            }
          });
        let id = res.data.list.id;
        if(this.type == 1 && this.serve == 2){
          uni.navigateTo({
            url: `/pageIndex/menu/order?id=${id}&type=${that.type}&serve=${this.serve}`
          });
        }else{
          uni.navigateTo({
            url: `${this.url}?id=${id}&type=${that.type}&serve=${this.serve}`
          });
        }
      }
    }
  }
};
</script>
<style lang='less' scoped>
@import url("../../common/util.less");
.question-zixun {
  padding: 25rpx;
  box-sizing: border-box;
  .text-box {
    position: relative;
    margin-bottom: 28rpx;
    .textarea {
      width: calc(100% - 50rpx);
      height: 280rpx;
      padding: 23rpx;
      background-color: #eaf0fe;
      border-radius: 20rpx;
      font-size: 26rpx;
    }
    .input-num {
      position: absolute;
      bottom: 25rpx;
      right: 25rpx;
      font-size: 24rpx;
      color: @font-color;
    }
  }
  .content-box {
    padding: 40rpx 20rpx;
    background-color: #fff;
    border-radius: 20rpx;
    border: 0.5rpx solid rgba(240, 240, 240, 0.5);
    .type {
      display: flex;
      align-items: flex-start;
      .red-text {
        color: red;
        font-weight: 600;
      }
      .type-title {
        font-size: 30rpx;
        color: #6c76a7;
        margin-right: 35rpx;
      }
      .picker {
        flex: 1;
        .picker-content {
          color: @font-color;
          font-size: 26rpx;
          padding-bottom: 20rpx;
          border-bottom: 2px solid #f4f4f4;
          .gh-between();
        }
        .icon-qianjin {
          font-size: 26rpx;
        }
      }
    }
    .submit {
      .gh-center();
      width: 620rpx;
      height: 80rpx;
      margin: 65rpx auto;
      background-color: #849aff;
      border-radius: 40rpx;
      color: #fff;
      font-size: 36rpx;
      border: none;
    }
  }
}
/deep/.placeholderClass {
  color: @font-color;
  font-size: 26rpx;
}
</style>